<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    * {
        padding: 0;
        margin: 0;
    }

    html,
    body {
        width: 100%;
        height: 100%;
    }

    .con {
        width: 100%;
        height: 4000px;
        background: url("mooc.png") center top no-repeat;
    }

    .login {
        width: 360px;
        height: 360px;
        background: url("login.png") no-repeat;
        z-index: 2;
        position: fixed;
        left: 50%;
        top: 50%;
        margin-top: -180px;
        margin-left: -180px;
    }

    .opacity_ {
        width: 100%;
        height: 100%;
        background: url("opacity.png");
        position: fixed;
        left: 0px;
        top: 0px;
        z-index: 0;
    }
    </style>
</head>

<body>
    <div class="con"></div>
    <div class="opacity_"></div>
    <div class="login"></div>
</body>

</html>